<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <div class="list">
                        <span>选择日期:</span>
                        <DatePicker type="date" placeholder="请选择开始时间" style="width: 200px" v-model="startTime" :options="options" :clearable="false"></DatePicker>
                        <DatePicker type="date" placeholder="请选择结束时间" style="width: 200px;margin-left:20px;" v-model="endTime" :options="options" :clearable="false"></DatePicker>
                    </div>
                    <div class="list">
                        <span>单据来源:</span>
                        <CheckboxGroup v-model="sourceType">
                            <Checkbox v-for="(val,index) in sourceList" :key="index" :label="val.id">
                                <span>{{val.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                    <div class="list list1">
                        <div class="item1">
                            <span>材料类别:</span>
                            <Select v-model="matTypeName" filterable style="width:200px" placeholder="请选择材料类别名称" @on-change="getmatList">
                                <Option v-for="item in matTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>材料明细:</span>
                            <Select v-model="matName" filterable style="width:200px" placeholder="请选择材料明细名称">
                                <Option v-for="item in matList" :value="item.id" :key="item.id" style="width:180px">{{item.name}}{{item.spec}}{{item.model}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>发料单位:</span>
                            <Select v-model="receiveSupplierName" filterable style="width:200px" placeholder="请选择发料单位名称">
                                <Option v-for="item in corpList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <input type="text" class="intBox" style="display:none" />
                        <div class="item1">
                            <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                            <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                            <el-button type="primary" style="margin-left:20px;" size="small" plain @click="downLoad" :disabled="!btnList.includes('fmam/supplierDiff/export')">导出</el-button>
                        </div>
                    </div>
                </div>
                <div class="banner">
                    <div class="msg_data" style="width:100%">
                        <div class="item">
                            <div>
                                <p>
                                    <span>过磅材料数:</span>
                                    <span>{{actualMatNum}}</span>
                                </p>
                                <p>
                                    <span>超负差数:</span>
                                    <span>{{negDiffNum}}</span>
                                </p>
                                <p>
                                    <span>实际重量(吨):</span>
                                    <span>{{actualWeight}}</span>
                                </p>
                                <p>
                                    <span>运单重量(吨):</span>
                                    <span>{{deliveryWeight}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="echarts">
                        <div id="diff" :style="{ height: '100%'}"></div>
                    </div>
                    <div class="top5" style="margin-bottom:20px;">
                        <div class="item">
                            <h2 style="margin-bottom:10px;">本期超负差数TOP5</h2>
                            <div class="table">
                                <el-table :data="diffNumList" style="width: 100%">
                                    <el-table-column type="index" label="排名" width="55px" align="center"></el-table-column>
                                    <el-table-column prop="sendSupplierName" label="供应商"></el-table-column>
                                    <el-table-column prop="actualMatNum" label="过磅材料数"></el-table-column>
                                    <el-table-column prop="actualDiffNum" label="超负差数"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="item">
                            <h2 style="margin-bottom:10px;">本期超负差比TOP5</h2>
                            <div class="table">
                                <el-table :data="diffRateList" style="width: 100%">
                                    <el-table-column type="index" label="排名" width="55px" align="center"></el-table-column>
                                    <el-table-column prop="sendSupplierName" label="供应商"></el-table-column>
                                    <el-table-column label="超负差/过磅材料数">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.actualDiffNum}}</span>/
                                            <span>{{scope.row.actualMatNum}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="actualDiffRate" label="超负差比(%)"></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search" style="border:none">
                    <el-button style="margin-right:20px;" :type="flag?'primary':'info'" @click="getCategoryType(0)" size="small" plain>按供应商分组</el-button>
                    <el-button :type="!flag?'primary':'info'" @click="getCategoryType(1)" size="small" plain>按材料明细分组</el-button>
                </div>
                <div v-if="flag">
                    <div class="table" style="width:96%;margin:20px auto;">
                        <el-table :data="groupList" style="width: 100%;">
                            <el-table-column type="expand" width="40px">
                                <template slot-scope="porps">
                                    <el-table :data="porps.row.weighNoteMatList" :show-header="false" style="width:100%;" @row-click="getMat">
                                        <el-table-column width="40px"></el-table-column>
                                        <el-table-column label="材料明细|供应商">
                                            <template slot-scope="scope">
                                                <p>{{scope.row.matName}}</p>
                                                <span>规格/型号:{{scope.row.spec}}{{scope.row.model}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                                        <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                                        <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                                        <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                                        <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                                        <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                                        <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                                        <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sendSupplierName" label="材料明细|供应商">
                                <template slot-scope="scope">
                                    <p>{{scope.row.sendSupplierName}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                            <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                            <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                            <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                            <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                            <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                            <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                            <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div v-if="!flag">
                    <div class="table" style="width:96%;margin:20px auto;">
                        <el-table :data="matGroupList" style="width: 100%;">
                            <el-table-column type="expand" width="40px">
                                <template slot-scope="porps">
                                    <el-table :data="porps.row.sendSupplierList" :show-header="false" style="width:100%;" @row-click="getMatType">
                                        <el-table-column width="40px"></el-table-column>
                                        <el-table-column prop="sendSupplierName" label="材料明细|供应商"></el-table-column>
                                        <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                                        <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                                        <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                                        <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                                        <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                                        <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                                        <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                                        <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column label="材料明细|供应商">
                                <template slot-scope="scope">
                                    <p>{{scope.row.matName}}</p>
                                    <span>规格/型号:{{scope.row.spec}}{{scope.row.model}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                            <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                            <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                            <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                            <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                            <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                            <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                            <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import {
    getAnalysisDiffNum,
    getAnalysisDiffRate,
    getAnalysisSupplierGroup,
    getAnalysisSupplierMatGroup,
    getAnalysisSupplierDiffData,
    getAllSupplierList,
    getMatTypeOptionlist,
    getAllMatList,
    getFmamSupplierExport
} from "@/api/api.js";
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            endTime: new Date(),
            startTime: new Date(new Date().valueOf() - 604800000),
            matTypeName: "",
            matName: "",
            receiveSupplierName: "",
            porjrctList: [],
            list: [],
            detailsModal: false,
            detailsObj: {},
            enterImgList: [],
            outImgList: [],
            imgList: [],
            noteMatList: [],
            confirmWeight: "",
            diffNumList: [],
            diffRateList: [],
            flag: true,
            groupList: [],
            deliveryAmount: "",
            actualAmount: "",
            confirmWeight: "",
            deliveryWeight: "",
            actualWeight: "",
            deductAmount: "",
            actualMatNum: "",
            negDiffNum: "", //负差
            norDiffNum: "", //正差
            posDiffNum: "", //超正差
            matGroupList: [],
            sourceList: [
                {
                    id: 0,
                    name: "称重"
                },
                {
                    id: 1,
                    name: "补录"
                }
            ],
            sourceType: [0, 1],
            corpList: [],
            matTypeList: [],
            matList: [],
            matId: "",
            btnList:[],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.sourceType = [0, 1];
                this.endTime = new Date();
                this.startTime = new Date(new Date().valueOf() - 604800000);
                this.matTypeName = "";
                this.matName = "";
                this.receiveSupplierName = "";
                this.initDate();
                this.getCorpList();
                this.getMatTypeList();
                this.getMatDetailsList();
            }
            if (this.flag) {
                this.getSupplierGroup();
            } else {
                this.getSupplierMatGroup();
            }
        }
    },
    methods: {
        //获取供应商单位
        getCorpList() {
            let params = {
                deptId: this.deptId,
                category: 2
            };
            getAllSupplierList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //查询材料类别列表
        getMatTypeList() {
            let params = {
                deptId: this.deptId
            };
            getMatTypeOptionlist(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matTypeList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getMatDetailsList() {
            let params = {
                deptId: this.deptId,
                matTypeId: this.matId
            };
            getAllMatList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取材料类别
        getmatList(index) {
            this.matName = "";
            this.matId = index;
            this.getMatDetailsList();
        },
        initDate() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                matTypeId: this.matTypeName,
                matId: this.matName,
                sourceList: this.sourceType,
                sendSupplierId: this.receiveSupplierName
            };
            getAnalysisDiffNum(params)
                .then(res => {
                    if (res.code == 200) {
                        this.diffNumList = res.data;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            getAnalysisDiffRate(params)
                .then(res => {
                    if (res.code == 200) {
                        this.diffRateList = res.data;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            getAnalysisSupplierDiffData(params)
                .then(res => {
                    if (res.code == 200) {
                        this.actualAmount = res.data.actualAmount;
                        this.actualMatNum = res.data.actualMatNum;
                        this.actualWeight = res.data.actualWeight;
                        this.confirmWeight = res.data.confirmWeight;
                        this.deliveryAmount = res.data.deliveryAmount;
                        this.deliveryWeight = res.data.deliveryWeight;
                        this.negDiffNum = res.data.negDiffNum;
                        this.norDiffNum = res.data.norDiffNum;
                        this.posDiffNum = res.data.posDiffNum;
                        this.drawDiff();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        searchAll() {
            if ( new Date(this.startTime).getTime() > new Date(this.endTime).getTime()) {
                this.$Modal.warning({
                    title: "错误",
                    content: "结束日期不能小于开始日期"
                });
                return;
            }
            this.initDate();
            if (this.flag) {
                this.getSupplierGroup();
            } else {
                this.getSupplierMatGroup();
            }
        },
        clear() {
            this.endTime = new Date();
            this.sourceType = [0, 1];
            this.startTime = new Date(new Date().valueOf() - 604800000);
            this.matTypeName = "";
            this.matName = "";
            this.receiveSupplierName = "";
            this.initDate();
            if (this.flag) {
                this.getSupplierGroup();
            } else {
                this.getSupplierMatGroup();
            }
        },
        getSupplierGroup() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                matTypeId: this.matTypeName,
                matId: this.matName,
                sourceList: this.sourceType,
                sendSupplierId: this.receiveSupplierName
            };
            getAnalysisSupplierGroup(params)
                .then(res => {
                    if (res.code == 200) {
                        this.groupList = res.data;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getSupplierMatGroup() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                matTypeId: this.matTypeName,
                matId: this.matName,
                sourceList: this.sourceType,
                sendSupplierId: this.receiveSupplierName
            };
            getAnalysisSupplierMatGroup(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matGroupList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getCategoryType(type) {
            if (type == 0) {
                this.flag = true;
                this.getSupplierGroup();
            } else {
                this.flag = false;
                this.getSupplierMatGroup();
            }
        },
        getMat(row) {
            let obj = {
                matName: row.matName,
                model: row.model,
                spec: row.spec
            };
            localStorage.setItem("mat_flag", 1);
            localStorage.setItem("mat_obj", JSON.stringify(obj));
            this.$router.push({
                path: "/fmam/receiveDetailes",
                query: {
                    id: row.matId
                }
            });
        },
        getMatType(row) {
            this.$router.push({
                path: "/fmam/supplierDetailes",
                query: {
                    id: row.sendSupplierId
                }
            });
        },
        drawDiff() {
            let Diff = this.$echarts.init(document.getElementById("diff"));
            Diff.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: ["#1891FF", "#2BB6FF", "#00AF6D"],
                legend: {
                    data: ["超负差", "正常", "超正差"],
                    x: "right",
                    top: 20
                },
                grid: {
                    top: "20px",
                    containLabel: true
                },
                series: [
                    {
                        name: "偏差类型",
                        type: "pie",
                        radius: "60%",
                        center: ["50%", "50%"],
                        label: {
                            normal: {
                                formatter: " {b|{b}:}{c}",
                                rich: {}
                            }
                        },
                        data: [
                            {
                                name: "超负差",
                                value: this.negDiffNum
                            },
                            {
                                name: "正常",
                                value: this.norDiffNum
                            },
                            {
                                name: "超正差",
                                value: this.posDiffNum
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            });
        },
        downLoad() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                matTypeId: this.matTypeName,
                matId: this.matName,
                sourceList: this.sourceType,
                sendSupplierId: this.receiveSupplierName
            };
            getFmamSupplierExport(params)
                .then(res => {
                    if (res.code == 200) {
                        window.open(res.data.path);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.initDate();
        this.getSupplierGroup();
        this.getCorpList();
        this.getMatTypeList();
        this.getMatDetailsList();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/base.less";
.banner {
    width: 96%;
    margin: 0 auto;
    margin-top: 10px;
    .top5 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item {
            width: 40%;
        }
    }
    .echarts {
        height: 300px;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
    }
}
</style>
